<!-- 线路概览 -->
<template>
  <div class='lineoverview'>
    <img src="/src/assets/uiResources/sub.png" alt="" ref='img' />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Viewer from "viewerjs";
import { nextTick, onMounted, onBeforeUnmount } from "vue";

let viewerInstance
const img = ref(null)

// // 图片全屏事件
// const handlFullScreen = () => {
//   if (!document.fullscreenElement) {
//     // 请求全屏
//     img.value.requestFullscreen().catch(err => {
//       alert(`Error attempting to enable fullscreen: ${err.message} (${err.name})`);
//     });
//   } else {
//     // 退出全屏
//     document.exitFullscreen();
//   }
// }

onMounted(() => {
  nextTick(() => {  // 等待DOM更新
    viewerInstance = new Viewer(img.value, { // 默认会为img绑定点击事件
      inline: true, // 设置为 true 可以让查看器内联显示，而不是全屏模式
      navbar:false, // 隐藏导航栏
      toolbar:false, // 隐藏工具栏
      title: false,   // 不显示标题
      tooltip: false, // 不显示缩放百分比提示
      viewed() { // 当查看器加载完成时触发
        viewerInstance.zoomTo(0.1); // 将图片缩放到原始大小的10%
      },
    });
  });
});

onBeforeUnmount(() => {
  // 销毁查看器实例以防止内存泄漏
  if (viewerInstance) {
    viewerInstance.destroy();
    viewerInstance = null;
  }
});
</script>

<style scoped lang='scss'>
img {
  visibility: hidden;
  width: 448px;
  height: 200px
}
</style>